<template>
  <div class="chat">
    <!--问题-->
    <div style="text-align: right">
      <div class="el-card chat-right">
        {{ msg.question }}
      </div>
    </div>
    <!--AI回答-->
    <div style="text-align: left">
      <div class="el-card chat-left">
        {{ msg.answer }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      count: 0,
    };
  },
};
</script>

<style scoped lang="scss">
.chat {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
  .ai-img {
    height: 36px;
    width: 36px;
  }
  .chat-left {
    background-color: #f5f6f7 !important;
    display: inline-block;
    box-sizing: border-box;
    width: auto;
    text-align: left;
    border-radius: 12px;
    line-height: 24px;
    max-width: 100%;
    padding: 12px 16px;
    white-space: pre-wrap;
  }
  .chat-right {
    background-color: #e0dfff;
    display: inline-block;
    box-sizing: border-box;
    width: auto;
    color: #3f3f3f;
    border-radius: 12px;
    line-height: 24px;
    max-width: 100%;
    padding: 12px 16px;
    white-space: pre-wrap;
  }
}
</style>
